<template>
  <!-- <div class="mb-[10px] s2k:mb-[13.3px] s4k:mb-[20px]"></div> -->
  <el-tabs v-model="editableTabsValue" type="card" class="demo-tabs" closable @tab-remove="removeTab">
    
    <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
      <template #label>
        <div class="custom-tabs-label flex flex-row items-center">
           <svg-icon name="grid3" width="20px" height="20px" class="svgLogo mx-[10px] s2k:mx-[13.3px] s4k:mx-[20px]"></svg-icon>
<!--          <img class="w-[16.57px] s4k:w-[33.14px]" src="@/assets/image/grid.png" alt="">-->
          <span>{{ item.content }}</span>
        </div>
      </template>
      <div class="px-[32px] py-0 s2k:px-[42.66px] s4k:px-[64px]">
        <Content :content="item.content" :name="item.name" @passonName="acceptName"/>
      </div>
    </el-tab-pane>
    <el-tab-pane >
      <template #label>
        <!-- <svg-icon name="add" width="16px" height="16px" class="svgLogo" @click="addTab(editableTabsValue)"></svg-icon> -->
        <img src="@/assets/image/add.png" class="w-[16px] s2k:w-[21.3px] s4k:w-[32px]" alt="" @click="addTab
        (editableTabsValue)">
      </template>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup name="Home">
import Content from './content.vue'
import { onMounted, reactive, ref } from "vue";
let tabIndex = 2
const editableTabsValue = ref('2')
const editableTabs = ref([
  {
    title: 'Tab 1',
    name: '1',
    content: 'View 1',
  },
  {
    title: 'Tab 2',
    name: '2',
    content: 'View 2',
  },
])
const addTab = (targetName) => {
  const newTabName = `${++tabIndex}`
  editableTabs.value.push({
    title: 'New Tab',
    name: newTabName,
    content: `View ${tabIndex}`,
  })
  editableTabsValue.value = newTabName
}
const removeTab = (targetName) => {
  if(editableTabs.value.length == 1){
    alert('至少有一项选项卡的存在')
    return false
  }
  const tabs = editableTabs.value
  let activeName = editableTabsValue.value
  if (activeName === targetName) {
    tabs.forEach((tab, index) => {
      if (tab.name === targetName) {
        const nextTab = tabs[index + 1] || tabs[index - 1]
        if (nextTab) {
          activeName = nextTab.name
        }
      }
    })
  }
  editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
  editableTabsValue.value = activeName
}
const acceptName = (param, name) => {
  let newData = editableTabs.value.filter(p => p.name == name)
  // console.log('obj',newData[0].title)
  newData[0].content = param
}
</script>

<style scoped lang="scss">
:deep(.el-tabs__header) {
  height: 40px;
  border-bottom: solid 1px var(--grid);
  // border: none;
}
:deep(.el-tabs__header .el-tabs__item) {
  border-top: solid var(--grid) 1px;
  border-right: solid var(--grid) 1px;
  border-bottom: none;
  border-left: none;
  // border-top-right-radius: 6px;
  // border-top-left-radius: 6px;
  // margin: 0 1px;
  color: var(--gridFont);
  font-size: 14px;
  padding: 0 !important;
  padding-right: 20px !important;
  .el-icon{
    width: 20px !important;
    height: 20px !important;
    font-size: 20px !important;
    &:hover{
      background-color: rgba(0,0,0,0);
    }
  }
  svg{
    color: var(--gridFont);
    font-size: 40px !important;
    &:hover{
      font-size: 40px !important;
    }
  }
}
:deep(.el-tabs__header .el-tabs__item:first-child) {
  // margin-left: 5px;
  // border-left: solid 1px var(--grid);
  border-right: var(--grid) solid 1px;
}

:deep(.el-tabs__header .el-tabs__item:last-child) {
  width: 40px;
  height: 40px !important;
  padding-left: 20px !important;
  border: none !important;
  border-left: solid var(--grid) 1px;
  svg{
    display: none;
  }
}

:deep(.el-tabs__header .el-tabs__item.is-active) {
  border-bottom-color: var(--cellBg);
  height: 41px;
  background-color: var(--cellBg);
  padding: 0;
  font-family: Medium;
  color: var(--bule-font);
  .el-icon{
    width: 20px !important;
    height: 20px !important;
    font-size: 20px !important;
  }
}

:deep(.el-tabs__header .el-tabs__nav) {
  border: none;
}

.custom-tabs-label {
  img {
    width: 12px;
    margin: 0 10px;
  }
}
@media screen and (min-width: 2560px) {
  :deep(.el-tabs__header) {
    height: 53.3px;
  }
  :deep(.el-tabs__header .el-tabs__item:first-child) {
    // margin-left: 6.67px;
    border-right: none;
  }

  :deep(.el-tabs__header .el-tabs__item:last-child) {
    width: 53.3px;
    height: 53.3px !important;
    padding-left: 26.67px !important;
  }

  :deep(.el-tabs__header .el-tabs__item) {
    height: 53.3px !important;
    // margin: 0 2px;
    font-size: 18.67px;
    padding-right: 26.67px !important;
    .el-icon{
      width: 20.67px !important;
      height: 20.67px !important;
      font-size: 20.67px !important;
    }
    svg{
      font-size: 53.3px !important;
      &:hover{
        font-size: 53.3px !important;
      }
    }
  }

  :deep(.el-tabs__header .el-tabs__item.is-active) {
    height: 54.67px;
    .el-icon{
      width: 26.67px !important;
      height: 26.67px !important;
      font-size: 26.67px !important;
    }
  }

  .custom-tabs-label {
    img {
      width: 16px;
      margin: 0 16.3px;
    }
  }
}
@media screen and (min-width: 3840px) {
  :deep(.el-tabs__header) {
    height: 80px;
  }
  :deep(.el-tabs__header .el-tabs__item:first-child) {
    // margin-left: 10px;
  }

  :deep(.el-tabs__header .el-tabs__item:last-child) {
    width: 80px;
    height: 80px !important;
    padding-left: 40px !important;
  }

  :deep(.el-tabs__header .el-tabs__item) {
    height: 80px !important;
    // margin: 0 2px;
    font-size: 28px;
    padding-right: 40px !important;
    .el-icon{
      width: 40px !important;
      height: 40px !important;
      font-size: 40px !important;
    }
    svg{
      font-size: 80px !important;
      &:hover{
        font-size: 80px !important;
      }
    }
  }

  :deep(.el-tabs__header .el-tabs__item.is-active) {
    height: 82px;
    .el-icon{
      width: 40px !important;
      height: 40px !important;
      font-size: 40px !important;
    }
  }

  .custom-tabs-label {
    img {
      width: 32px !important;
      margin: 0 20px !important;
    }
  }
}
</style>